<div class="p-3 mb-2 bg-secondary text-white">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">hiSHtory</h1>
      <p class="lead">Your shell history in context, synced, and queryable</p>
    </div>
  </div>
</div>

<nav class="navbar navbar-light bg-light">
  <form class="form-inline my-2 my-lg-0 w-100" style="display:flex">
    <input
      type="search"
      name="q"
      id="search-input"
      autocomplete="off"
      placeholder="Search Query"
      value="{{ .SearchQuery }}"
      class="form-control mr-sm-2"
      hx-get="/htmx/results-table"
      hx-params="*"
      hx-trigger="input changed delay:500ms, search"
      hx-target="#search-results"
    />
    <button
      id="search-button"
      class="btn btn-outline-success my-2 my-sm-0 btn-light"
      type="submit"
    >
      Search
    </button>
  </form>
</nav>

<hr />

{{ block "resultsTable.html" . }}
  <div id="search-results" class="table-responsive">
    <table class="table">
      <thead>
        <tr class="table-info">
          {{ range .ColumnNames }}
            <th scope="col">{{ . }}</th>
          {{ end }}
        </tr>
      </thead>
      <tbody>
        {{ range .SearchResults }}
          <tr class="table-light">
            {{ range . }}
              <td>{{ . }}</td>
            {{ end }}
          </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
{{ end }}


<link href="/static/css/bootstrap.min.css" rel="stylesheet" />
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/htmx.min.js"></script>
